html,body{
    margin: 0;
    padding:0;
    height:100%;
}
/* 第一张图 */
body {background:url("https://mainstb.oss-cn-shenzhen.aliyuncs.com/pengyubrother/pc-pic/sgpz/btn/images/水果品种10_02.jpg")
no-repeat;
    background-size:100% 100%;}

/* #first{
  width:100%;
  height: 100%;
  background-image:url("./picture/variety/images/水果品种10_02.jpg" ); 
  background-size:100% 100%;
  height: 1400px;
  width: 1530px;
} */
#div1{
    width:150px;
    height: 100px;
    background: orange;
    margin-top: 60px;
    margin-left: 120px;
}


#bodyfour{
    width:100%;
    height: 100%;
    background-image:url("https://mainstb.oss-cn-shenzhen.aliyuncs.com/pengyubrother/pc-pic/sgpz/variety/images/水果品种10_01.jpg");
    background-size:100% 100%;
    height: 800px;
}

#bodyfour_one{
    height:15%;
    width: 35%;
    margin-left: 33%;
    color: white;
    font-size: 105px;
    text-align: center;
    padding-top: 10%;
    font-weight: 900;
    -webkit-text-stroke: 1px white;
    color: transparent;
}
#bodyfour_one::before{
    -webkit-text-stroke: 6 px #ffffff;
    position: absolute;
    z-index: -1;
}

#bodyfour_twe{
    color: aliceblue;
    height:20%;
    width: 35%;
    margin-left: 18%;
    font-size: 30px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap; /* 文字不换行 */
}

/* 第三部分 */
#body1{
    width:100%;
    height: 100%;
    background-image:url("https://mainstb.oss-cn-shenzhen.aliyuncs.com/pengyubrother/pc-pic/sgpz/variety/images/varity1.png" );
    background-size:100% 100%;
    height: 700px;
    width: 1530px;
}

#body2{
    height:15%;
    width: 35%;
    margin-left: -10%;
    color: orange;
    font-size: 40px;
    text-align: center;
    padding-top: 26%;
    font-weight: 900;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
    /* box-shadow:0px 0px 6px #00000030;边框描边 */
}


#body3{
    color: tomato;
    text-align: left;
    height:20%;
    width: 35%;
    margin-left: 39%;
    margin-top: 5%;
    font-size: 15px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap; /* 文字不换行 */
    /* text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0; */
}

#body4{
    font-weight: bold;
    color: tomato;
    text-align: left;
    height:40%;
    width: 35%;
    margin-left: 86px;
    margin-top: -190px;
    font-size: 28px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap;
}




/* 第四部分 */
#body5{
    width:100%;
    height: 100%;
    background-image:url("https://mainstb.oss-cn-shenzhen.aliyuncs.com/pengyubrother/pc-pic/sgpz/variety/images/varity2.png" );
    background-size:100% 100%;
    height: 700px;
    width: 1530px;
}

#body6{
    height:15%;
    width: 35%;
    margin-left: -10%;
    color: orange;
    font-size: 40px;
    text-align: center;
    padding-top: 26%;
    font-weight: 900;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
    /* box-shadow:0px 0px 6px #00000030;边框描边 */
}


#body7{
    color: tomato;
    text-align: left;
    height:20%;
    width: 35%;
    margin-left: 172%;
    margin-top: 20%;
    font-size: 15px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap; /* 文字不换行 */
    /* text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0; */
}

#body8{
    font-weight: bold;
    color: tomato;
    text-align: left;
    height:40%;
    width: 35%;
    margin-left: 86px;
    margin-top: -190px;
    font-size: 28px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap;
}

#body9{
    font-weight: bold;
    color: gold;
    text-align: left;
    height:40%;
    width: 35%;
    margin-left: 26px;
    margin-top: -82px;
    font-size: 40px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap;
}



#body10{
    width:100%;
    height: 100%;
    background-image:url("https://mainstb.oss-cn-shenzhen.aliyuncs.com/pengyubrother/pc-pic/sgpz/variety/images/varity3.png" );
    background-size:100% 100%;
    height: 700px;
    width: 1530px;
}

#body11{
    height:15%;
    width: 35%;
    margin-left: -10%;
    color: orange;
    font-size: 40px;
    text-align: center;
    padding-top: 26%;
    font-weight: 900;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
    /* box-shadow:0px 0px 6px #00000030;边框描边 */
}


#body12{
    color: tomato;
    text-align: left;
    height:20%;
    width: 35%;
    margin-left: 39%;
    margin-top: 15%;
    font-size: 15px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap; /* 文字不换行 */
    /* text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0; */
}

#body13{
    font-weight: bold;
    color: tomato;
    text-align: left;
    height:40%;
    width: 35%;
    margin-left: 86px;
    margin-top: -190px;
    font-size: 28px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap;
}

#bodyadd{
    font-weight: bold;
    color: gold;
    text-align: left;
    height:40%;
    width: 35%;
    margin-left: 23px;
    margin-top: -90px;
    font-size: 40px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap;
}


#pic1{
    width:100%;
    height: 100%;
    background-image:url("https://mainstb.oss-cn-shenzhen.aliyuncs.com/pengyubrother/pc-pic/sgpz/variety/images/varity4.png" );
    background-size:100% 100%;
    height: 700px;
    width: 1530px;
}

#pic2{
    height:15%;
    width: 35%;
    margin-left: -10%;
    color: orange;
    font-size: 40px;
    text-align: center;
    padding-top: 26%;
    font-weight: 900;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
    /* box-shadow:0px 0px 6px #00000030;边框描边 */
}


#pic3{
    color: tomato;
    text-align: left;
    height:20%;
    width: 35%;
    margin-left: 175%;
    margin-top: 20%;
    font-size: 15px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap; /* 文字不换行 */
    /* text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0; */
}

#pic4{
    font-weight: bold;
    color: tomato;
    text-align: left;
    height:40%;
    width: 35%;
    margin-left: 86px;
    margin-top: -190px;
    font-size: 23px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap;
}

#pic5{
    font-weight: bold;
    color: gold;
    text-align: left;
    height:40%;
    width: 35%;
    margin-left: 26px;
    margin-top: -82px;
    font-size: 40px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap;
}


#pic6{
    width:100%;
    height: 100%;
    background-image:url("https://mainstb.oss-cn-shenzhen.aliyuncs.com/pengyubrother/pc-pic/sgpz/variety/images/varity5.png" );
    background-size:100% 100%;
    height: 700px;
    width: 1530px;
}

#bodyadd1{
    font-weight: bold;
    color: gold;
    text-align: left;
    height:40%;
    width: 35%;
    margin-left: 23px;
    margin-top: -75px;
    font-size: 40px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap;
}

#body01{
    height:15%;
    width: 35%;
    margin-left: -10%;
    color: orange;
    font-size: 40px;
    text-align: center;
    padding-top: 26%;
    font-weight: 900;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
    /* box-shadow:0px 0px 6px #00000030;边框描边 */
}


#body02{
    color: tomato;
    text-align: left;
    height:20%;
    width: 35%;
    margin-left: 39%;
    margin-top: 15%;
    font-size: 15px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap; /* 文字不换行 */
    /* text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0; */
}

#body03{
    font-weight: bold;
    color: tomato;
    text-align: left;
    height:40%;
    width: 35%;
    margin-left: 86px;
    margin-top: -190px;
    font-size: 22px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap;
}


#pic7{
    width:100%;
    height: 100%;
    background-image:url("https://mainstb.oss-cn-shenzhen.aliyuncs.com/pengyubrother/pc-pic/sgpz/variety/images/varity6.png" );
    background-size:100% 100%;
    height: 700px;
    width: 1530px;
}

#pic8{
    width:100%;
    height: 100%;
    background-image:url("https://mainstb.oss-cn-shenzhen.aliyuncs.com/pengyubrother/pc-pic/sgpz/variety/images/varity7.png" );
    background-size:100% 100%;
    height: 700px;
    width: 1530px;
}

#body20{
    width:100%;
    height: 100%;
    background-image:url("https://mainstb.oss-cn-shenzhen.aliyuncs.com/pengyubrother/pc-pic/sgpz/variety/images/varity8.png" );
    background-size:100% 100%;
    height: 700px;
    width: 1530px;
}

#body21{
    height:15%;
    width: 35%;
    margin-left: -10%;
    color: orange;
    font-size: 40px;
    text-align: center;
    padding-top: 26%;
    font-weight: 900;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
    /* box-shadow:0px 0px 6px #00000030;边框描边 */
}


#body22{
    color: tomato;
    text-align: left;
    height:20%;
    width: 35%;
    margin-left: 172%;
    margin-top: 15%;
    font-size: 15px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap; /* 文字不换行 */
    /* text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0; */
}

#body23{
    font-weight: bold;
    color: tomato;
    text-align: left;
    height:40%;
    width: 35%;
    margin-left: 86px;
    margin-top: -190px;
    font-size: 28px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap;
}

#body24{
    font-weight: bold;
    color: orange;
    text-align: left;
    height:40%;
    width: 35%;
    margin-left: 26px;
    margin-top: -100px;
    font-size: 40px;
    text-align: center;
    font-weight: 900;
    white-space:nowrap;
}

#body25{
    width:100%;
    height: 100%;
    background-image:url("https://mainstb.oss-cn-shenzhen.aliyuncs.com/pengyubrother/pc-pic/sgpz/variety/images/varity9.png" );
    background-size:100% 100%;
    height: 700px;
    width: 1530px;
}




/* /* *{
  margin: 0px;
  padding: 0px;
}
body{
  background: #000;
} */
a:not(nav a){
    /* 取消a标签的下划线 */
    text-decoration: none;
    position: absolute;
    left: 35%;
    top: 178%;
    /* 不用关心宽高多少 */
    transform: translate(-50%,-50%);
    font-size: 13px;
    font: left 4;
    /* 设置渐变的颜色 */
    background: linear-gradient(90deg,orange,white,yellow,green);
    /* 设置背景大小400% */
    background-size: 400%;
    width: 4.2rem;
    height: 1.6rem;
    color: black;
    text-align: center;
    margin-left: 20px;
    line-height: 1.8rem;
    /* 设置英文为大写显示 */
    text-transform: uppercase;
    border-radius: 2.125rem;
}
/*运用伪元素 设置图层，出现荧光 */
a::before{
    /* content: ""; */
    /*设置伪元素的位置*/
    position: absolute;
    left: -0.3125rem;
    right: -0.3125rem;
    top: -0.3125rem;
    bottom: -0.3125rem;
    background: linear-gradient(90deg,orange,white,yellow,green);
    background-size: 400%;
    border-radius: 3.125rem;
    /*设置滤镜*/
    filter: blur(1.25rem);
    z-index: -1;
}
/* 鼠标移动上去后伪元素开始动画效果 */
a:hover::before{
    animation: sun 8s infinite;
}
a:hover{
    animation: sun 8s infinite;
}
@keyframes sun{
    to{background-position: -400% 0;}
}


#bodytwo{
    width:100%;
    height: 100%;
    background-image:url("https://mainstb.oss-cn-shenzhen.aliyuncs.com/pengyubrother/pc-pic/sgpz/btn/images/水果品种10_02.jpg" );
    background-size:100% 100%;
    height: 1200px;
    width: 1526px;
}


#bodytwo2{
    height:15%;
    width: 35%;
    margin-left: 590px;
    margin-top: 15px;
    color: green;
    font-size: 50px;
    /* text-align: center; */
    padding-top: -80%;
    font-weight: 900;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
    /* box-shadow:0px 0px 6px #00000030;边框描边 */
}

#bodytwo3{
    font-weight: 300;
    color:black;
    font-size:20px;
    margin-top: 70px;
    margin-left: 60px;
}

#bodytwo4{
    width:608px;
    height: 100px;
    margin-left: 30px;
}

.card
{
    width:30px;
    height:20px;
    margin-top: 89px;
    margin-left: -168px;
}
.card1
{
    width:130px;
    height:180px;
}



.card2
{
    width:30px;
    height:20px;
    margin-top: 160px;
    margin-left: -310px;
}
.card3
{
    width:180px;
    height:230px;
}

.card4
{
    width:30px;
    height:20px;
    margin-top: -110px;
    margin-left: 20px;
}
.card5
{
    width:130px;
    height:180px;
}


.card6
{
    width:30px;
    height:20px;
    margin-top: -160px;
    margin-left: 420px;
}
.card7
{
    width:180px;
    height:230px;
}


.card8
{
    width:30px;
    height:20px;
    margin-top: 389px;
    margin-left: -468px;
}
.card9
{
    width:130px;
    height:180px;
}


.card10
{
    width:30px;
    height:20px;
    margin-top: 160px;
    margin-left: -280px;
}
.card11
{
    width:180px;
    height:230px;
}


.card12
{
    width:30px;
    height:20px;
    margin-top: -39px;
    margin-left: -48px;
}
.card13
{
    width:130px;
    height:180px;
}


.card14
{
    width:30px;
    height:20px;
    margin-top: -209px;
    margin-left: 198px;
}
.card15
{
    width:130px;
    height:160px;
}


.card16
{
    width:30px;
    height:20px;
    margin-top: 84px;
    margin-left: 440px;
}
.card17
{
    width:130px;
    height:160px;
}


.card18
{
    width:30px;
    height:20px;
    margin-top: 130px;
    margin-left: 240px;
}
.card19
{
    width:130px;
    height:160px;
}


/* 点击购买按钮位置 */
.btn-1 {
    background-color: rgb(255, 196, 0);
    border: none;
    z-index: 1;
    margin-left: -245px;
    margin-top: 247px;

    width:80px;
    height:50;
    border-radius: 25px;  /* 边框锐化 */
}

.btn-2 {
    background-color: rgb(255, 196, 0);
    border: none;
    z-index: 1;
    margin-left: 180px;
    margin-top: 545px;

    margin-left: 106px;
    width:80px;
    height:50;
    border-radius: 25px;  /* 边框锐化 */
}

.btn-3 {
    background-color: rgb(255, 196, 0);
    border: none;
    z-index: 1;

    margin-top: 100px;
    padding: 10px;

    margin-left: 180px;
    width:80px;
    height:40;
    border-radius: 25px;  /* 边框锐化 */
}

.btn-4 {
    background-color: rgb(255, 196, 0);
    border: none;
    z-index: 1;

    margin-top: 320px;
    padding: 10px;

    margin-left: 360px;
    width:80px;
    height:30px;
    border-radius: 25px;  /* 边框锐化 */
}

.btn-6 {
    background-color: rgb(255, 196, 0);
    border: none;
    z-index: 1;

    margin-top: 370px;
    padding: 10px;

    margin-left: -600px;
    width:80px;
    height:30px;
    border-radius: 25px;  /* 边框锐化 */
}

.btn-7 {
    background-color: rgb(255, 196, 0);
    border: none;
    z-index: 1;

    margin-top: 587px;
    padding: 10px;

    margin-left: 400px;
    width:80px;
    height:40;
    border-radius: 25px;  /* 边框锐化 */
}

.btn-8 {
    background-color: rgb(255, 196, 0);
    border: none;
    z-index: 1;
    margin-left: 600px;
    margin-top: -247px;

    width:80px;
    height:50;
    border-radius: 25px;  /* 边框锐化 */
}

.btn-9 {
    background-color: rgb(255, 196, 0);
    border: none;
    z-index: 1;
    margin-left: 593px;
    margin-top: 425px;

    width:80px;
    height:50;
    border-radius: 25px;  /* 边框锐化 */
}

.btn-10 {
    background-color: rgb(255, 196, 0);
    border: none;
    z-index: 1;
    margin-left: -193px;
    margin-top: 595px;

    width:80px;
    height:50;
    border-radius: 25px;  /* 边框锐化 */
}

.btn-11 {
    background-color: rgb(255, 196, 0);
    border: none;
    z-index: 1;
    margin-left: -13px;
    margin-top: -195px;

    width:80px;
    height:50;
    border-radius: 25px;  /* 边框锐化 */
}
/* 加果子上市月份 */
/* 夏橙 */
#bodyaddf{
    font-weight: 300;
    color:black;
    font-size:15px;
    margin-top: 160px;
    margin-left: -20px;
}

/* 泰国红宝石 */
#bodyaddf1{
    font-weight: 300;
    color:black;
    font-size:15px;
    margin-top: -180px;
    margin-left: -420px;
}
/* 沃柑 */
#bodyaddf2{
    font-weight: 300;
    color:black;
    font-size:15px;
    margin-top: 190px;
    margin-left: 220px;
}
/* 真硒柚 */
#bodyaddf3{
    font-weight: 300;
    color:black;
    font-size:15px;
    margin-top: 1px;
    margin-left: 490px;
}
/* 恭喜橙 */
#bodyaddf4{
    font-weight: 300;
    color:black;
    font-size:15px;
    white-space:nowrap; /* 文字不换行 */
    margin-top: -200px;
    margin-left: 200px;
}
/* 早柑 */
#bodyaddf5{
    font-weight: 300;
    color:black;
    font-size:15px;
    white-space:nowrap; /* 文字不换行 */
    margin-top: -130px;
    margin-left: -250px;
}
/* w；沃特默 */
#bodyaddf6{
    font-weight: 300;
    color:black;
    font-size:15px;
    white-space:nowrap; /* 文字不换行 */
    margin-top: -430px;
    margin-left: -550px;
}

/* 桂柚1号 */
#bodyaddf7{
    font-weight: 300;
    color:black;
    font-size:15px;
    margin-top: -180px;
    margin-left: 180px;
}
/* 日南1号 */
#bodyaddf8{
    font-weight: 300;
    color:black;
    font-size:15px;
    margin-top: 60px;
    margin-left: 220px;
}

/* 金秋砂糖橘 */
#bodyaddf9{
    font-weight: 300;
    color:black;
    font-size:15px;
    margin-top: -160px;
    margin-left: 380px;
}

/* 加橙色文字 */
/* 夏橙 */
#bodyadde{
    font-weight: 300;
    color:gold;
    font-size:25px;
    margin-top: -105px;
    margin-left: -9px;
    font-weight: 700;
}
/* 泰国红宝石 */
#bodyadde1{
    font-weight: 300;
    color:gold;
    font-size:15px;
    margin-top: -185px;
    margin-left: -426px;
    font-weight: 700;
}
/* 沃柑 */
#bodyadde2{
    font-weight: 300;
    color:orange;
    font-size:15px;
    margin-top: 189px;
    margin-left: 234px;
    font-weight: 700;
}
/* w；沃科特 */
#bodyadd3{
    font-weight: 300;
    color:orange;
    font-size:15px;
    white-space:nowrap; /* 文字不换行 */
    margin-top: -699px;
    margin-left: -130px;
    font-weight: 700;
}

/* 桂柚1号 */
#bodyadde4{
    font-weight: 300;
    color:orange;
    font-size:15px;
    margin-top: -180px;
    margin-left: 200px;
    font-weight: 700;
}
/* 日南1号 */
#bodyadde5{
    font-weight: 300;
    color:orange;;
    font-size:15px;
    margin-top: 60px;
    margin-left: 190px;
    font-weight: 700;
}
/* 金秋砂糖橘 */
#bodyadde6{
    font-weight: 300;
    color:orange;
    font-size:15px;
    margin-top: -160px;
    margin-left: 390px;
    font-weight: 700;
}
/* 恭喜橙 */
#bodyadde7{
    font-weight: 300;
    color:gold;
    font-size:15px;
    white-space:nowrap; /* 文字不换行 */
    margin-top: 720px;
    margin-left: 30px;
    font-weight: 700;
}
/* 早柑 */
#bodyadde8{
    font-weight: 300;
    color:gold;
    font-size:15px;
    white-space:nowrap; /* 文字不换行 */
    margin-top: -130px;
    margin-left: -240px;
    font-weight: 700;
}
/* 真硒柚 */
#bodyadde9{
    font-weight: 300;
    color:gold;
    font-size:15px;
    margin-top: 263px;
    margin-left: 45px;
    font-weight: 700;
}